<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { Setting, Refresh } from '@element-plus/icons-vue'
import { awordStore } from '@/store/modules/AWordConfig'
import { formatDate } from '@/utils/date'
import { RightMenuItem, ContextMenuOptions } from '@/components/RightMenu/interfaceType'
import contextMenu from '@/components/RightMenu/index'

let configStore = storeToRefs(awordStore())
let { aWord, day: newDay } = configStore

let newDay1 = formatDate(new Date(), 'yyyy-MM-dd');

let dialogConfig = ref(false)
let c = ref(aWord.value?.type || 'rand')
watch(dialogConfig, async (newQuestion, oldQuestion) => {
  c.value = aWord.value?.type || 'rand'
})
const refreshAWord = () => {
  let url = 'https://api.vvhan.com/api/ian/' + c.value+'?type=json'
  ajaxRequest.get({
    url: url,
    submitAgainValidation: true,
    submitAgainTime: 3000
  }).then((res: any) => {
    
    if (typeof res == 'string') {
      res = JSON.parse(res)
    }
    newDay.value = newDay1
    aWord.value = res
    aWord.value.type = c.value
    dialogConfig.value = false
  })
}


const items: RightMenuItem[] = [
  {
    label: `刷新一言`,
    svg: Refresh,
    onClick: () => {
      refreshAWord()
    }
  },
  {
    label: `一言设置`,
    svg: Setting,
    onClick: () => {
      dialogConfig.value = true
    }
  }
]
const options: ContextMenuOptions = {
  items
}

function openMenu(e: MouseEvent) {
  contextMenu(e, options)
}


nextTick(() => {
  if (newDay1 == newDay.value) return
  refreshAWord()
})
</script>

<template>
  <div class="aword-box" style="height: 100%;" @contextmenu.prevent="openMenu">
    <div class="aword-content">
      <div style="text-align: left;padding: 12px 12px 0 12px;">{{ aWord?.data?.content }}</div>
      <div style="text-align: right;padding: 0px 12px 12px 0;">&mdash;&mdash;{{ aWord?.data?.form }}
        <!-- <slot v-if="aWord?.data?.creator">·{{ aWord?.data?.creator }}</slot> -->
      </div>
    </div>
    <!--
    
    -->
    <el-dialog v-model="dialogConfig" v-if="dialogConfig" title="一言设置" width="500" :append-to-body="true">
      <div>
        <div style="text-align: left;padding: 12px 12px 0 12px;">{{ aWord?.data?.content }}</div>
        <div style="text-align: right;padding: 0px 12px 12px 0;">&mdash;&mdash;{{ aWord?.data?.form }}
          <slot v-if="aWord?.data?.creator">·{{ aWord?.data?.creator }}</slot>
        </div>
      </div>
      <el-radio-group v-model="c">
        <el-radio-button class="aword-type" label="动漫" value="dongman" />
        <el-radio-button class="aword-type" label="文学" value="wenxue" />
        <el-radio-button class="aword-type" label="诗词" value="shici" />
        <el-radio-button class="aword-type" label="随机" value="rand" />
      </el-radio-group>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="refreshAWord">更新</el-button>
          <el-button @click="dialogConfig = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.aword-box {
  /* background-color: rgba(0, 0, 0, 0.3); */
  /* font-size: 13px; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  align-items: center;
  width: max-content;

  .aword-content {
    height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /* pointer-events: none; */
  }

  .aword-set {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0px;
    /* top: 4px; */
    opacity: 0;
    transition: opacity .3s;
    /* color: #d9d9d9; */
  }
}

.aword-box:hover {
  .aword-set {
    opacity: 1;
  }
}

.aword-type {
  padding: 8px;
}

:deep(.el-radio-group) {
  justify-content: space-between;
}

:deep(.el-radio-button__inner) {
  border-left: var(--el-border);
  border-radius: 5px !important;
}
</style>
